<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__dict">
      <el-form
        :model="fromData"
        :rules="dataRule2"
        ref="fromData"
        :label-width="$i18n.locale === 'en-US' ? '150px' : '140px'"
      >
        <h4>民宿详情</h4>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="企业名称" prop="operateProject">
              <el-input v-model="fromData.operateProject"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商户名称" prop="name">
              <el-input v-model="fromData.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="住宿类别" prop="category">
              <ren-select
                v-model="fromData.category"
                dict-type="HotelCategory"
                placeholder="请选择"
                style="width: 100%"
              ></ren-select>
            </el-form-item>
          </el-col>
  <el-col :span="8">
            <el-form-item label="携程预付民宿id" prop="xcPresetHotelId">
              <el-input
                v-model="fromData.xcPresetHotelId"
                placeholder="携程预付民宿id"
              ></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="8">
            <el-form-item label="携程现付民宿id" prop="xcThenHotelId">
              <el-input
                v-model="fromData.xcThenHotelId"
                placeholder="携程现付民宿id"
              ></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="8">
            <!-- <el-form-item label="美团民宿id" prop="mtHotelId">
              <el-input
                v-model="fromData.mtHotelId"
                placeholder="美团民宿id"
              ></el-input>
            </el-form-item> -->
            <el-form-item :label="mtmsText" style="height: 41px;">
              <block v-if="fromData.isBindMt!=1">
                <block v-if="!mtmssq">
                  <el-button type="primary" size="small" @click="bindMtMs">去绑定</el-button>
                </block>
                <block v-else>
                  <el-radio-group v-model="isMtmsSq" @change="mtmsChange">
                    <el-radio :label="0">未授权</el-radio>
                    <el-radio :label="1">确认授权</el-radio>
                  </el-radio-group>
                </block>
              </block>
              <block v-else>
                <span style="font-size: 14px;color: #3E8EF7;font-weight: bold;">已绑定</span>
              </block>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开业时间" prop="openingDate">
              <el-date-picker
                v-model="fromData.openingDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="特色标签" prop="featureLabelsArr">
              <ren-select
                :multiple="true"
                :limit="4"
                v-model="fromData.featureLabelsArr"
                dict-type="FeatureLabels"
                placeholder="请选择"
                style="width: 100%"
              ></ren-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="酒店电话" prop="landlinePhone">
              <el-input
                v-model="fromData.landlinePhone"
                placeholder="酒店电话"
              ></el-input>
            </el-form-item>
          </el-col>
         
          <el-col :span="8">
            <el-form-item label="是否启用" prop="operateStatus">
              <el-switch
                :active-value="0"
                :inactive-value="1"
                v-model="fromData.operateStatus"
                active-text="是"
                inactive-text="否"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="酒店介绍" prop="introduction">
              <editor-vue
                style="margin-top: -30px"
                :content="fromData.introduction"
                @EditorChange="getEditor"
                ref="infoIntroduceRef"
              ></editor-vue>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <p class="pdl60">
              <span style="color: #f56c6c">*</span>酒店详情图<span
                >(支持png、jpg，建议尺寸750*610px，最多10张)</span
              >
            </p>
          </el-col>
          <el-col :span="24">
            <el-form-item label="" prop="picList">
              <el-upload
                :action="url"
                :file-list="fileList"
                :limit="10"
                :before-upload="beforeUploadHandle"
                list-type="picture-card"
                :on-success="successHandle"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <cropper-dlg
                v-if="showCropper"
                :dialogVisible.sync="showCropper"
                :img-file="currentFile"
                ref="vueCropper"
                :fixedNumber="fixedNumber"
                @upload="cropperUpload"
              ></cropper-dlg>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <p class="pdl60">酒店视频</p>
          </el-col>
          <el-col :span="24" style="margin-top: -40px">
            <el-form-item label="" prop="videoUrl">
              <el-upload
                style="width: 780px"
                class="video-uploader"
                :action="url"
                :limit="1"
                :file-list="videoFileList"
                :on-success="handleSuccessVideo"
                :before-upload="beforeUploadVideo"
                accept="video/mp4, video/ogg, video/flv"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <el-button
                  size="small"
                  type="info"
                  @click.stop="
                    fromData.videoUrl = '';
                    videoFileList = [];
                  "
                  style="margin-left: 10px"
                  >清空视频</el-button
                >
              </el-upload>
            </el-form-item>
            <div class="videoBox" v-if="fromData.videoUrl">
              <video
                ref="videoPlayer"
                :controls="true"
                :src="fromData.videoUrl"
                style="width: 780px; height: 280px; background: #000"
              ></video>
            </div>
          </el-col>
        </el-row>

        <h4>预订须知</h4>
        <!-- <el-row v-if="fromData.breakfastConfig">
          <el-col :span="6">
            <el-form-item label="形式" prop="form">
              <el-input
                v-model="fromData.breakfastConfig.form"
                placeholder="形式"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="价格" prop="price">
              <el-input
                v-model="fromData.breakfastConfig.price"
                placeholder="价格"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="营业开始时间" prop="openTimeStart">
              <el-time-picker
                is-range
                v-model="time"
                value-format="HH:mm:ss"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
              >
              </el-time-picker>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="年龄限制" prop="ageLimit">
              <el-input
                v-model="fromData.ageLimit"
                placeholder="年龄限制"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="入离时间" prop="checkinTime">
              <el-time-picker
                v-model="fromData.checkinTime"
                value-format="HH:mm"
                format="HH:mm"
                placeholder=""
                style="margin-right: 10px"
              >
              </el-time-picker>
              <el-time-picker
                v-model="fromData.checkoutTime"
                value-format="HH:mm:ss"
                placeholder=""
              >
              </el-time-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经纬度" prop="lonandLat">
              <el-input
                v-model="fromData.lonandLat"
                style="width: 60%; margin-right: 10px"
              ></el-input>
              <el-button type="primary" size="mini" @click="mapCli()"
                >地图选点</el-button
              >
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属区域" prop="islandName">
              <el-input
                disabled
                v-model="fromData.islandName"
                placeholder="所属区域"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="地址" prop="areaDetail">
              <el-select
                style="width: 14%; margin-right: 1.5%"
                v-model="fromData.province"
                placeholder="省编码"
                clearable
                @change="
                  (val) => {
                    regionChange(val, 'province');
                  }
                "
              >
                <el-option
                  v-for="(item, index) in provinceOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-select
                style="width: 14%; margin-right: 1.5%"
                v-model="fromData.city"
                placeholder="市"
                clearable
                @change="
                  (val) => {
                    regionChange(val, 'city');
                  }
                "
              >
                <el-option
                  v-for="(item, index) in cityOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-select
                style="width: 14%; margin-right: 1.5%"
                v-model="fromData.area"
                placeholder="区"
                clearable
                @change="
                  (val) => {
                    regionChange(val, 'area');
                  }
                "
              >
                <el-option
                  v-for="(item, index) in areaOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>

              <el-input
                v-model="fromData.street"
                placeholder="街道"
                style="width: 14%; margin-right: 1.5%"
              >
              </el-input>

              <el-input
                v-model="fromData.areaDetail"
                placeholder="请输入详细地址"
                style="width: 38%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="儿童床条约" prop="childrenBedPact">
              <el-radio-group v-model="fromData.childrenBedPact">
                <el-radio :label="0">不允许携带儿童床</el-radio>
                <el-radio :label="1">允许儿童床在13岁内</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="入住方式" prop="checkinMode">
              <el-radio-group v-model="fromData.checkinMode">
                <el-radio :label="1">前台钥匙/门卡</el-radio>
                <el-radio :label="2">密码</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="是否自动接单" prop="">
              <el-switch
                active-value="1"
                inactive-value="0"
                v-model="dataList.proValue"
                active-text="是"
                inactive-text="否"
              >
              </el-switch>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="是否加入船票+" prop="isJoint">
              <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="fromData.isJoint"
                active-text="是"
                inactive-text="否"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="提供免费码头接送" prop="isTransfer">
              <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="fromData.isTransfer"
                active-text="是"
                inactive-text="否"
              >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="是否含早餐" prop="breakfastType">
              <el-radio-group v-model="fromData.breakfastType">
                <el-radio :label="0">无早</el-radio>
                <el-radio :label="3">含早</el-radio>
                <el-radio :label="2">含早收费</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否能携带宠物" prop="carryPet">
              <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="fromData.carryPet"
                active-text="是"
                inactive-text="否"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收费说明" prop="isDeposit">
              <el-radio-group v-model="fromData.isDeposit">
                <el-radio :label="1">收取押金 </el-radio>
                <el-radio :label="0">无押金</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="fromData.breakfastType === 2 && fromData.breakfastConfig">
          <el-col :span="6">
            <el-form-item label="早餐形式" prop="form">
              <el-input
                v-model="fromData.breakfastConfig.form"
                placeholder="早餐形式"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="早餐价格" prop="price">
              <el-input
                v-model="fromData.breakfastConfig.price"
                placeholder="早餐价格"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="营业开始时间" prop="openTimeStart">
              <el-time-picker
                is-range
                v-model="time"
                value-format="HH:mm"
                format="HH:mm"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
              >
              </el-time-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="background: #f5f5f5; padding-top: 10px">
          <el-col :span="8">
            <el-form-item label="是否提供餐饮" prop="isWithRepast ">
              <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="fromData.isWithRepast"
                active-text="是"
                inactive-text="否"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="10" v-if="fromData.isWithRepast == 1">
            <el-form-item label="营业时间" prop="businessTimePeriod" required>
              <el-time-picker
                v-model="TimePeriod1"
                value-format="HH:mm:ss"
                placeholder=""
                style="margin-right: 10px"
              >
              </el-time-picker>
              <el-time-picker
                v-model="TimePeriod2"
                value-format="HH:mm:ss"
                placeholder=""
              >
              </el-time-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="fromData.isWithRepast == 1">
            提前预定
            <el-input
              v-model="fromData.advanceBookTime"
              placeholder=""
              type="number"
              min="1"
              style="width: 80px"
            ></el-input
            >小时
          </el-col>
          <el-col :span="24" v-if="fromData.isWithRepast == 1">
            <el-form-item label="就餐时间" prop="">
              <div
                class="item"
                v-for="(item, index) in repastTimePeriod"
                :key="index"
                style="margin-bottom: 10px"
              >
                <el-time-picker
                  v-model="item.TimePeriod1"
                  value-format="HH:mm"
                  format="HH:mm"
                  placeholder=""
                  style="margin-right: 10px"
                >
                </el-time-picker>
                <el-time-picker
                  v-model="item.TimePeriod2"
                  value-format="HH:mm"
                  format="HH:mm"
                  placeholder=""
                >
                </el-time-picker>
                <el-link
                  type="danger"
                  style="margin-left: 10px; height: 14px"
                  @click="delRepastTime(index)"
                  >删除</el-link
                >
              </div>
              <el-button type="primary" @click="addRepastTime()"
                >新增就餐时间</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
        <h4>服务设施</h4>
        <el-row :gutter="30">
          <el-col :span="8" v-for="(item, index) in facilityArr" :key="index">
            <el-form-item :label="item.key">
              <el-select
                v-model="item.val"
                multiple
                placeholder="请选择"
                clearable
                style="width: 100%"
                value-key="id"
              >
                <el-option
                  :value="item2.id"
                  v-for="(item2, index2) in item.list"
                  :key="index2"
                  :label="item2.facilityName"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align: center; margin-top: 20px">
        <el-button
          v-if="$hasPermission('hotel:homestay:updateByMerchant')"
          type="primary"
          @click="fromDataSubmitHandle2()"
          style="width: 120px"
          >{{ $t("confirm") }}</el-button
        >
      </div>
    </div>
    <el-dialog :visible.sync="mapShow" title="地图选点" top="70px">
      <mapdiv
        ref="mapDiv"
        style="width: 96%; margin: 0 auto 20px"
        :longitude="fromData.lon"
        :latitude="fromData.lat"
        @getPos="getPosVal($event)"
      >
      </mapdiv>
    </el-dialog>
  </el-card>
</template>

<script>
import Cookies from "js-cookie";
import mixinRegionModule from "@/mixins/region-module";
import debounce from "lodash/debounce";
import mapdiv from "../data/map-data/map2";
import editorVue from "@/components/editor";
export default {
  mixins: [mixinRegionModule],
  data() {
    return {
      fixedNumber: [75, 61],
      showCropper: false, //裁剪弹框
      isCropper: true, //上传之前是否显示裁剪
      dialogImageUrl: "",
      dialogVisible: false,
      url: `${
        window.SITE_CONFIG["apiURL"]
      }/oss/file/aliyunUpload?access_token=${Cookies.get("access_token")}`,
      num: 0,
      fileList: [],
      videoFileList: [],
      mapShow: false,
      visible: false,
      homestayId: this.$store.state.user.homestayId,
      value1: "",
      value2: "",
      TimePeriod1: "",
      TimePeriod2: "",
      repastTimePeriod: [], //就餐时间多个
      fromData: {
        operateStatus:'',
        xcPresetHotelId:'',
        xcThenHotelId:'',
        mtHotelId:'',
        breakfastType: "",
        operateProject: "",
        homestayCheckList: [],
        id: "",
        name: "",
        areaDetail: "",
        street: "",
        area: "",
        city: "",
        province: "",
        checkOutTime: "",
        isSettlement: 0,
        isJoint: 0,
        isNeedCard: 0,
        isCheckOut: 0,
        lat: "",
        lonandLat: "",
        lon: "",
        isWithRepast: 0,
        advanceBookTime: "",
        businessTimePeriod: "",
        repastTimePeriod: [],
        ageLimit: "",
        areaDetail: "",
        bookHint: "",
        breakfastConfig: {
          form: "",
          openTimeEnd: "",
          openTimeStart: "",
          price: 0,
        },
        carryPet: 0,
        checkinMode: 0,
        checkinTime: "",
        checkoutTime: "",
        childrenBedPact: 0,
        cover: "",
        facilityMap: {
          additionalProperties1: {
            facilityCode: "",
            facilityName: "",
            facilityTypeId: 0,
            facilityTypeName: "",
            id: 0,
            isCheck: "",
            sort: 0,
          },
        },
        featureLabels: "",
        heightConfig: [
          {
            height: "",
            price: 0,
          },
        ],
        id: 0,
        introduction: "",
        isDeposit: 0,
        isTransfer: 0,
        landlinePhone: "",
        licenseList: [],
        name: "",
        openingDate: "",
        picList: [],
        videoUrl: "",
        routePlan: "",
        featureLabelsArr: [],
        category: "",
      },
      facilityArr: [
        {
          key: "",
          list: [],
        },
      ],
      cardType: ["身份证", "护照"],
      time: null,
      dataList: {
        homestayId: this.$store.state.user.homestayId,
        id: "",
        proValue: 0,
      },
      //tempLandlinePhone: "",
      mtmsText:'美团民宿绑定',
      mtmssq:false,//是否显示美团民宿授权
      isMtmsSq:0
    };
  },
  components: {
    mapdiv,
    editorVue,
  },
  computed: {
    dataRule2() {
      return {
        checkinTime: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        childrenBedPact: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        lonandLat: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        areaDetail: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        category: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "change",
          },
        ],
        // picList: [
        //   {
        //     required: true,
        //     message: this.$t("validate.required"),
        //     trigger: "blur",
        //   },
        // ],
        introduction: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        businessTimePeriod: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        operateProject: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        featureLabelsArr: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "change",
          },
        ],
        landlinePhone: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        openingDate: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  watch: {
    time(newval, oldval) {
      if (newval && newval != oldval) {
        this.fromData.breakfastConfig.openTimeStart = newval[0];
        this.fromData.breakfastConfig.openTimeEnd = newval[1];
      }
    },
  },
  created() {
    this.time = null;
    this.provincAreaDetailInfoList();
    this.getjiedan();
    //信息
    this.getInfoNew();
  },
  mounted() {
    // this.player = videojs(
    //   this.$refs.videoPlayer,
    //   this.videoOptions,
    //   function onPlayerReady() {
    //     console.log("Player is ready");
    //   }
    // );
  },
  methods: {
    bindMtMs(){
      this.$http.post("/hotel/meituan/ota/authorize", {
          ms_hotel_id:localStorage.getItem("homestayId")||'',
        }).then((res) => {
          if (res.data.code == 0) {
            if(res.data.data.authorize_url){
              window.open(res.data.data.authorize_url);
              this.mtmsText = '美团民宿授权';
              this.mtmssq = true;
            }
          }else this.$message.error(res.data.msg);
        });
    },
    mtmsChange(e){
      if(e == 1){
        this.$http.post("/hotel/meituan/ota/accessToken", {
          ms_hotel_id:localStorage.getItem("homestayId")||'',
        }).then((res) => {
          if (res.data.code != 0) {
            this.$message.error(res.data.msg);
            this.isMtmsSq = 0;
            this.mtmsText = '美团民宿绑定';
            this.mtmssq = false;
          }else this.fromData.isBindMt = 1;
        });
      }
    },

    //新增删除就餐时间
    addRepastTime() {
      this.repastTimePeriod.push({
        TimePeriod1: "",
        TimePeriod2: "",
      });
    },
    delRepastTime(i) {
      this.repastTimePeriod.splice(i, 1);
    },
    // 合并餐饮营业时间
    TimePeriod() {
      this.fromData.businessTimePeriod =
        this.TimePeriod1 + "-" + this.TimePeriod2;
      this.fromData.repastTimePeriod = this.repastTimePeriod.map((item) => {
        return item.TimePeriod1 + "-" + item.TimePeriod2;
      });
    },
    getEditor(val) {
      this.fromData.introduction = val;
    },
    mapCli() {
      this.mapShow = true;
      this.$nextTick(() => {
        this.$refs.mapDiv.initMap();
      });
    },
    getPosVal(obj) {
      this.mapShow = false;
      this.fromData.lat = obj.lat;
      this.fromData.lon = obj.lon;
      if (obj.lat && obj.lon) this.fromData.lonandLat = obj.lon + "," + obj.lat;
      else this.fromData.lonandLat = "";
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
      this.fromData.picList = fileList.map((item) => {
        return item.url;
      });
    },
    handleSuccessVideo(res) {
      if (res.code !== 0) {
        return this.$message.error(res.msg);
      }
      this.fromData.videoUrl = res.data.url;
    },
    beforeUploadVideo(file) {
      if (
        file.type !== "video/mp4" &&
        file.type !== "video/oggg" &&
        file.type !== "video/flv"
      ) {
        this.$message.error(
          this.$t("upload.tip", {
            format: "mp4、oggg、flv",
          })
        );
        return false;
      }
    },
    // 上传之前
    beforeUploadHandle(file) {
      if (
        file.type !== "image/jpg" &&
        file.type !== "image/jpeg" &&
        file.type !== "image/png" &&
        file.type !== "image/gif"
      ) {
        this.$message.error(
          this.$t("upload.tip", {
            format: "jpg、png、gif",
          })
        );
        return false;
      }
      if (this.isCropper) {
        //显示裁剪
        this.currentFile = file;
        this.showCropper = true;
        this.$nextTick(() => {
          this.$refs.vueCropper.init();
        });
        return false;
      }
    },

    cropperUpload(data) {
      this.showCropper = false;
      if (data != "close") {
        //裁剪成功后获取的图片
        this.$http.post("/oss/file/aliyunUpload", data).then((res) => {
          if (res.data.code == 0) {
            this.successHandle(res.data);
          }
        });
      }
    },
    // 上传成功
    successHandle(res, file, fileList) {
      if (res.code !== 0) {
        return this.$message.error(res.msg);
      }
      this.fileList.unshift({
        name: "",
        url: res.data.url,
      });
      this.fromData.picList = this.fileList.map((item) => {
        return item.url;
      });
    },
    addHei() {
      this.fromData.heightConfig.push({
        height: "",
        price: "",
      });
    },
    delHei(i) {
      this.fromData.heightConfig.splice(i, 1);
    },
    // 获取信息
    getInfoNew() {
      this.$http
        .get("/hotel/homestay/getInfoByMerchant/" + this.homestayId)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.fromData = {
            ...this.fromData,
            ...res.data,
          };
         // this.tempLandlinePhone = this.fromData.landlinePhone;
          // 处理服务设施
          this.facilityArr = [];
          for (let i in res.data.facilityMap) {
            let json = {
              key: i,
              list: res.data.facilityMap[i],
              val: res.data.facilityMap[i].map((item) => {
                if (item.isCheck == "1") {
                  return item.id;
                }
              }),
            };
            this.facilityArr.push(json);
          }
          //处理就餐时间
          if (this.fromData.repastTimePeriod) {
            this.repastTimePeriod = this.fromData.repastTimePeriod.map(
              (item) => {
                return {
                  TimePeriod1: item.split("-")[0],
                  TimePeriod2: item.split("-")[1],
                };
              }
            );
          }
          //repastTimePeriod
          if (this.fromData.category == null) this.fromData.category = "";
          let TimePeriod = this.fromData.businessTimePeriod.split("-");
          this.TimePeriod1 = TimePeriod[0];
          this.TimePeriod2 = TimePeriod[1];
          if (this.fromData.lon && this.fromData.lat)
            this.fromData.lonandLat =
              this.fromData.lon + "," + this.fromData.lat;
          else this.fromData.lonandLat = "";
          // 省市区数据
          if (this.fromData.city) {
            this.cityAreaDetailInfoList(this.fromData.province);
          }
          if (this.fromData.area) {
            this.countyAreaDetailInfoList(this.fromData.city);
          }

          this.$nextTick(() => {
            this.$refs.infoIntroduceRef.init();
          });

          if (this.fromData.featureLabels) {
            this.fromData.featureLabelsArr =
              this.fromData.featureLabels.split(",");
          }

          if (this.fromData.picList.length == 0) {
            this.fileList = [];
          } else {
            this.fileList = this.fromData.picList.map((item, index, arr) => {
              let type = typeof item;
              let json = {};
              json.name = "";
              if (typeof item == "string") json.url = item;
              // else if (typeof item == 'object') json.url = item;
              return json;
            });
          }

          //赋值早餐设置
          if (!this.fromData.breakfastConfig) {
            this.fromData.breakfastConfig = {
              form: "",
              openTimeEnd: "",
              openTimeStart: "",
              price: 0,
            };
          } else {
            this.time = [
              this.fromData.breakfastConfig.openTimeStart,
              this.fromData.breakfastConfig.openTimeEnd,
            ];
          }
        })
        .catch(() => {});
    },

    //回现是否自动接单
    getjiedan() {
      this.$http
        .get("/hotel/base/property/getAutoOrderByHomestayId/" + this.homestayId)
        .then((res) => {
          if (res.data.code == 0) {
            this.dataList.id = res.data.data.id;
            this.dataList.proValue = res.data.data.proValue || 0;
          }
        });
    },
    //设置自动接单
    setjiedan() {
      this.$http.put("/hotel/base/property", this.dataList).then((res) => {
      });
    },
    fromDataSubmitHandle2: debounce(
      function () {
        this.$refs["fromData"].validate((valid) => {
          if (!valid) {
            return false;
          }

          if (!this.fromData.isCheckOut) {
            this.fromData.checkOutTime = "";
          }
          this.setjiedan();
          this.TimePeriod();
          //
          if (this.fromData.isWithRepast == 1) {
            if (this.TimePeriod1 =='null'||this.TimePeriod2=='null') {
              return this.$message.error("请选择餐饮营业时间");
            }
          }
          //处理服务设施
          for (let i = 0; i < this.facilityArr.length; i++) {
            let key = this.facilityArr[i].key;
            let list = this.facilityArr[i].list.map((item) => {
              if (this.facilityArr[i].val.indexOf(item.id) > -1) {
                item.isCheck = "1";
                return item;
              } else {
                item.isCheck = "0";
                return item;
              }
            });
            this.fromData.facilityMap[key] = list;
          }
          this.fromData.featureLabels =
            this.fromData.featureLabelsArr.join(",");
          //加密
          let newDataForm = Object.assign({}, this.fromData);
          // if (
          //   newDataForm.landlinePhone &&
          //   this.tempLandlinePhone != newDataForm.landlinePhone
          // ) {
          //   //编辑了
          //   newDataForm.landlinePhone = this.$CryptoJS.encrypt(
          //     newDataForm.landlinePhone
          //   );
          // } else {
          //   newDataForm.landlinePhone = null;
          // }
          this.$http
            .put("/hotel/homestay/updateByMerchant", newDataForm)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {},
              });
            })
            .catch(() => {});
        });
      },
      1000,
      {
        leading: true,
        trailing: false,
      }
    ),
  },
};
</script>

<style lang="scss" scoped>
.avatar-uploader {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    .el-upload:hover {
      border-color: #409eff;
    }
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 158px;
    height: 158px;
    line-height: 158px;
    text-align: center;
  }

  .avatar {
    width: 158px;
    height: 158px;
    display: block;
  }
}

h3 {
  padding: 30px 0 15px;
  width: 94%;
  margin: 0 auto 30px;
  border-bottom: 1px solid #ddd;
  color: #303133;
  font-size: 22px;
  overflow: hidden;
}
.videoBox {
  box-sizing: border-box;
  position: relative;
  margin-left: 140px;
  margin-top: -10px;
  margin-bottom: 30px;
}
h4 {
  margin: 20px 0 20px 40px;
  font-size: 20px;
  display: block;
  border-bottom: 1px solid #e7e7e7;
  padding-bottom: 10px;
  padding-left: 10px;
}

// .btnFixed{
//     position:absoulate;
//     bottom:0;
//     width:100%;
//     left:0;
//     }
</style>
